
<html lang=""><head>
    <title>配置 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../gitbook/style.css">




    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="app-service/">


    <link rel="prev" href="structure.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../">

                        <a href="../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.2" data-path="MINA.html">

                        <a href="MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.3" data-path="../component/">

                        <a href="../component/">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.4" data-path="../api/">

                        <a href="../api/">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../devtools/devtools.html">

                        <a href="../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../qa/qa.html">

                        <a href="../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>配置</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  " data-level="1.2.1" data-path="structure.html">

                        <a href="structure.html">


                            目录结构

                        </a>



                    </li>

                    <li class="chapter active " data-level="1.2.2" data-path="config.html">

                        <a href="config.html">


                            配置

                        </a>



                    </li>

                    <li class="chapter  open" data-level="1.2.3" data-path="app-service/">

                        <a href="app-service/">


                            逻辑层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.3.1" data-path="app-service/app.html">

                                <a href="app-service/app.html">


                                    注册程序

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.2" data-path="app-service/page.html">

                                <a href="app-service/page.html">


                                    注册页面

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.3" data-path="app-service/module.html">

                                <a href="app-service/module.html">


                                    模块化

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.4" data-path="app-service/api.html">

                                <a href="app-service/api.html">


                                    API

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.2.4" data-path="view/">

                        <a href="view/">


                            视图层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.4.1" data-path="view/wxml/">

                                <a href="view/wxml/">


                                    WXML

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.2.4.1.1" data-path="view/wxml/data.html">

                                        <a href="view/wxml/data.html">


                                            数据绑定

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.2" data-path="view/wxml/conditional.html">

                                        <a href="view/wxml/conditional.html">


                                            条件渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.3" data-path="view/wxml/list.html">

                                        <a href="view/wxml/list.html">


                                            列表渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.4" data-path="view/wxml/template.html">

                                        <a href="view/wxml/template.html">


                                            模板

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.5" data-path="view/wxml/event.html">

                                        <a href="view/wxml/event.html">


                                            事件

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.6" data-path="view/wxml/import.html">

                                        <a href="view/wxml/import.html">


                                            引用

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.2.4.2" data-path="view/wxss.html">

                                <a href="view/wxss.html">


                                    WXSS

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.4.3" data-path="view/component.html">

                                <a href="view/component.html">


                                    组件

                                </a>



                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--

                <div class="book-header" role="navigation">

                </div>


                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h1 id="配置">配置</h1><p>​    我们使用<code>app.json</code>文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。</p><p>​    每一个小程序页面也可以使用<code>.json</code>文件来对本页面的窗口表现进行配置。    页面的配置比<code>app.json</code>全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。</p><p>以下是一个包含了所有配置选项的简单配置<code>app.json</code> ：</p><pre><code class="lang-json">{
  <span class="hljs-string">"pages"</span>: [
    <span class="hljs-string">"page/index/index"</span>,
    <span class="hljs-string">"page/logs/index"</span>
  ],
  <span class="hljs-string">"window"</span>: {
    <span class="hljs-string">"navigationBarTitleText"</span>: <span class="hljs-string">"Demo"</span>
  },
  <span class="hljs-string">"tabBar"</span>: {
    <span class="hljs-string">"list"</span>: [{
      <span class="hljs-string">"pagePath"</span>: <span class="hljs-string">"page/index/index"</span>,
      <span class="hljs-string">"text"</span>: <span class="hljs-string">"首页"</span>
    }, {
      <span class="hljs-string">"pagePath"</span>: <span class="hljs-string">"page/logs/logs"</span>,
      <span class="hljs-string">"text"</span>: <span class="hljs-string">"日志"</span>
    }]
  },
  <span class="hljs-string">"networkTimeout"</span>: {
    <span class="hljs-string">"request"</span>: <span class="hljs-number">10000</span>,
    <span class="hljs-string">"downloadFile"</span>: <span class="hljs-number">10000</span>
  },
  <span class="hljs-string">"debug"</span>: <span class="hljs-literal">true</span>
}</code></pre>
                                    <h3 id="appjson配置项列表">app.json配置项列表</h3><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="#pages">pages</a></td>
                                    <td>StringArray</td>
                                    <td>是</td>
                                    <td>设置页面路径</td>
                                </tr><tr><td><a href="#window">window</a></td>
                                    <td>Object</td>
                                    <td>否</td>
                                    <td>设置默认页面的窗口表现</td>
                                </tr><tr><td><a href="#tabBar">tabBar</a></td>
                                    <td>Object</td>
                                    <td>否</td>
                                    <td>设置底部tab的表现</td>
                                </tr><tr><td><a href="#networkTimeout">networkTimeout</a></td>
                                    <td>Object</td>
                                    <td>否</td>
                                    <td>设置网络超时时间</td>
                                </tr><tr><td><a href="#debug">debug</a></td>
                                    <td>Boolean</td>
                                    <td>否</td>
                                    <td>设置是否开启debug模式</td>
                                </tr></tbody></table>

                                    <h3 id="pages">pages</h3><p>​    接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，<strong>数组的第一项代表小程序的初始页面</strong>。小程序中新增/减少页面，都需要对pages数组进行修改。</p><p>​    文件名不需要写文件后缀，因为MINA会自动去寻找路径<code>.json</code>,<code>.js</code>,<code>.wxml</code>,<code>.wxss</code>的四个文件进行整合。</p><p>如开发目录为：</p><blockquote><p>page/</p><p>page/index/index.wxml</p><p>page/index/index.js</p><p>page/index/index.wxss</p><p>page/logs/logs.wxml</p><p>page/logs/logs.js</p><p>app.js</p><p>app.json</p><p>app.wxss</p></blockquote><p>则，我们需要在app.json中写</p><pre><code class="lang-json">{
  <span class="hljs-string">"pages"</span>:[
    <span class="hljs-string">"page/index/index"</span>
    <span class="hljs-string">"page/logs/logs"</span>
  ]
}</code></pre>
                                    <h3 id="window">window</h3><p>用于设置小程序的状态栏、导航条、标题、窗口背景色。</p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>默认值</th>
                                        <th>描述</th>
                                    </tr></thead><tbody>
                                <tr><td>navigationBarBackgroundColor</td>
                                    <td>HexColor</td>
                                    <td>#000000</td>
                                    <td>导航栏背景颜色，如"#000000"</td>
                                </tr><tr><td>navigationBarTextStyle</td>
                                    <td>String</td>
                                    <td>white</td>
                                    <td>导航栏标题颜色，仅支持 black/white</td>
                                </tr><tr><td>navigationBarTitleText</td>
                                    <td>String</td>
                                    <td></td>
                                    <td>导航栏标题文字内容</td>
                                </tr><tr><td>backgroundColor</td>
                                    <td>HexColor</td>
                                    <td>#ffffff</td>
                                    <td>窗口的背景色</td>
                                </tr><tr><td>backgroundTextStyle</td>
                                    <td>String</td>
                                    <td>dark</td>
                                    <td>下拉背景字体、loading图的样式，仅支持dark/light</td>
                                </tr><tr><td>enablePullDownRefresh</td>
                                    <td>Boolean</td>
                                    <td>false</td>
                                    <td>是否开启下拉刷新</td>
                                </tr></tbody></table>

                                    <p><strong>注：HexColor（十六进制颜色值），如"#ff00ff"</strong></p><p>如app.json：</p><pre><code class="lang-json">{
  <span class="hljs-string">"window"</span>:{
    <span class="hljs-string">"navigationBarBackgroundColor"</span>:<span class="hljs-string">"#ffffff"</span>,
    <span class="hljs-string">"navigationBarTextStyle"</span>:<span class="hljs-string">"black"</span>,
    <span class="hljs-string">"navigationBarTitleText"</span>:<span class="hljs-string">"微信接口功能演示"</span>,
    <span class="hljs-string">"backgroundColor"</span>:<span class="hljs-string">"#eeeeee"</span>,
    <span class="hljs-string">"backgroundTextStyle"</span>:<span class="hljs-string">"light"</span>
  }
} </code></pre>
                                    <p>页面的<code>.json</code>只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写<code>window</code>这个键，如：</p><pre><code class="lang-json">{
    <span class="hljs-string">"navigationBarBackgroundColor"</span>:<span class="hljs-string">"#ffffff"</span>,
    <span class="hljs-string">"navigationBarTextStyle"</span>:<span class="hljs-string">"black"</span>,
    <span class="hljs-string">"navigationBarTitleText"</span>:<span class="hljs-string">"微信接口功能演示"</span>,
    <span class="hljs-string">"backgroundColor"</span>:<span class="hljs-string">"#eeeeee"</span>,
    <span class="hljs-string">"backgroundTextStyle"</span>:<span class="hljs-string">"light"</span>
}</code></pre>
                                    <p><img src="../image/config.jpg"></p><h3 id="tabbar">tabBar</h3><p>​    如果我们的小程序是一个多tab应用（客户端窗口的底部有tab栏可以切换页面），那么我们可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。</p><p>​    tabBar是一个数组，<strong>只能配置最少2个、最多5个tab</strong>，tab按数组的顺序排序。</p><p><strong>属性说明：</strong></p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>默认值</th>
                                        <th>描述</th>
                                    </tr></thead><tbody>
                                <tr><td>color</td>
                                    <td>HexColor</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>tab上的文字默认颜色</td>
                                </tr><tr><td>selectedColor</td>
                                    <td>HexColor</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>tab上的文字选中时的颜色</td>
                                </tr><tr><td>backgroundColor</td>
                                    <td>HexColor</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>tab的背景色</td>
                                </tr><tr><td>borderStyle</td>
                                    <td>String</td>
                                    <td>否</td>
                                    <td>black</td>
                                    <td>tabbar上边框的颜色， 仅支持 black/white</td>
                                </tr><tr><td>list</td>
                                    <td>Array</td>
                                    <td>是</td>
                                    <td></td>
                                    <td>tab的列表，详见list属性说明，最少2个、最多5个tab</td>
                                </tr></tbody></table>

                                    <p>其中list接受一个数组，数组中的每个项都是一个对象，其属性值如下：</p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>pagePath</td>
                                    <td>String</td>
                                    <td>是</td>
                                    <td>页面路径，必须在pages中先定义</td>
                                </tr><tr><td>text</td>
                                    <td>String</td>
                                    <td>是</td>
                                    <td>tab上按钮文字</td>
                                </tr><tr><td>iconPath</td>
                                    <td>String</td>
                                    <td>是</td>
                                    <td>图片路径，icon大小限制为40kb</td>
                                </tr><tr><td>selectedIconPath</td>
                                    <td>String</td>
                                    <td>是</td>
                                    <td>选中时的图片路径，icon大小限制为40kb</td>
                                </tr></tbody></table>

                                    <p><img src="../image/tabbar.png"></p><h3 id="networktimeout">networkTimeout</h3><p>可以设置各种网络请求的超时时间。</p><p><strong>属性说明：</strong></p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>request</td>
                                    <td>Number</td>
                                    <td>否</td>
                                    <td><a href="../api/network-request.html">wx.request</a>的超时时间，单位毫秒</td>
                                </tr><tr><td>connectSocket</td>
                                    <td>Number</td>
                                    <td>否</td>
                                    <td><a href="../api/network-socket.html">wx.connectSocket</a>的超时时间，单位毫秒</td>
                                </tr><tr><td>uploadFile</td>
                                    <td>Number</td>
                                    <td>否</td>
                                    <td><a href="../api/network-file.html#wxuploadfileobject">wx.uploadFile</a>的超时时间，单位毫秒</td>
                                </tr><tr><td>downloadFile</td>
                                    <td>Number</td>
                                    <td>否</td>
                                    <td><a href="../api/network-file.html#wxdownloadfileobject">wx.downloadFile</a>的超时时间，单位毫秒</td>
                                </tr></tbody></table>

                                    <h3 id="debug">debug</h3><p>​    可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有<code>Page的注册</code>，<code>页面路由</code>，<code>数据更新</code>，<code>事件触发</code> 。 可以帮助开发者快速定位一些常见的问题。</p>

                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="structure.html" class="navigation navigation-prev " aria-label="Previous page: 目录结构">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="app-service/" class="navigation navigation-next " aria-label="Next page: 逻辑层">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../gitbook/gitbook.js"></script>
    <script src="../../gitbook/theme.js"></script>


    <script src="../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>


    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"配置","level":"1.2.2","depth":2,"next":{"title":"逻辑层","level":"1.2.3","depth":2,"path":"framework/app-service/index.md","ref":"framework/app-service/index.md","articles":[{"title":"注册程序","level":"1.2.3.1","depth":3,"path":"framework/app-service/app.md","ref":"framework/app-service/app.md","articles":[]},{"title":"注册页面","level":"1.2.3.2","depth":3,"path":"framework/app-service/page.md","ref":"framework/app-service/page.md","articles":[]},{"title":"模块化","level":"1.2.3.3","depth":3,"path":"framework/app-service/module.md","ref":"framework/app-service/module.md","articles":[]},{"title":"API","level":"1.2.3.4","depth":3,"path":"framework/app-service/api.md","ref":"framework/app-service/api.md","articles":[]}]},"previous":{"title":"目录结构","level":"1.2.1","depth":2,"path":"framework/structure.md","ref":"framework/structure.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"ignoreSpecialCharacters":false,"maxIndexSize":1000000},"theme-default":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"file":{"path":"framework/config.md","mtime":"2016-09-22T08:30:16.000Z","type":"markdown"},"gitbook":{"version":"3.2.0","time":"2016-09-22T09:40:22.799Z"},"basePath":"..","book":{"language":""}});
        });
    </script>




</div></body></html>